<template>
  <view class="sign-wrap">
    <view class="main" v-if="activeTab == 0">
      <view class="itemtop">
        <view class="topOne">
          <view class="upper_top" v-if="isWorkDay">
            {{ signSettingName.textUper }}
            <text>上班</text>
            - {{ signSettingName.textLower }}
            <text>下班</text>
          </view>

          <view class="upper_top" v-else>休息日</view>
          <view class="sign-upper">
            <view
              v-if="signTimeState"
              @click.stop="siginClick(2)"
              :class="{ radioColor: !addresState, upper_cent: addresState }"
            >
              <view class="cardOne" v-if="addresState">{{
                loadingAddress
                  ? "获取定位中"
                  : DataObj.signOutAddress
                  ? "刷新签退"
                  : addressNames
                  ? "打卡签退"
                  : "无法打卡"
              }}</view>
              <view class="cardOne" v-else>{{
                loadingAddress ? "获取定位中" : "当前时间"
              }}</view>
              <view class="cardTwo">{{ times || "--" }}</view>
              <view class="cardTree">{{ currYMD }}</view>
            </view>
            <view
              v-else
              @click.stop="siginClick(1)"
              :class="{ radioColor: !addresState, upper_cent: addresState }"
            >
              <view class="cardOne" v-if="addresState">{{
                loadingAddress
                  ? "获取定位中"
                  : addressNames
                  ? "打卡签到"
                  : "无法打卡"
              }}</view>
              <view class="cardOne" v-else>{{
                loadingAddress ? "获取定位中" : "当前时间"
              }}</view>
              <view class="cardTwo">{{ times || "--" }}</view>
              <view class="cardTree">{{ currYMD }}</view>
            </view>
            <view class="upper_addr">
              <image src="/static/images/locations.png" mode=""></image>
              <text>{{
                loadingAddress
                  ? "获取定位中，请稍等"
                  : addressNames || "无法定位，请开启手机定位"
              }}</text>
            </view>
            <view class="abnormal">
              <text :style="{ color: canSign ? '#69cd00;' : '#E02020;' }">{{
                canSign ? "已在打卡范围内" : "不在打卡范围内"
              }}</text>
            </view>
          </view>
          <!-- 打卡圆点 end -->
        </view>
      </view>

      <view class="itembotm">
        <view class="botmOne">
          <!-- 日历组件 start -->
          <view class="sign-middle">
            <uni-calendar
              swiperHigh="540rpx"
              @created="createdCalendar"
              :tomorrow="false"
              :dateList="dateList"
              :isShowYear="isShowYear"
              :mode="mode"
              @chooseDate="chooseDay"
              @changeDate="changeDate"
            ></uni-calendar>
          </view>
          <!-- 日历组件 end -->
          <!-- 签到详情 start -->
          <block v-if="DataObj.signAddress || DataObj.signOutAddress">
            <view class="sign-lower">
              <view class="line">
                <view></view>
                <image src="/static/images/index/fold.svg" mode="" />
                <view></view>
              </view>
              <view class="lower_state">
                <text
                  :style="{
                    'background-color': resultStr ? '#69cd00;' : '#E02020;',
                  }"
                ></text>
                <text>签到</text>
                <text class="strColor" v-if="DataObj.signType == 2"
                  >定位异常</text
                >
                <text :class="{ strColor: !resultStr, strColors: resultStr }">{{
                  resultStr ? "正常" : "迟到"
                }}</text>

                <block v-if="!resultStr || DataObj.signType == 2">
                  <text
                    v-if="DataObj.newSign == 2"
                    class="age-sign"
                    @click="applyCard('late')"
                    >申请补卡</text
                  >
                  <text v-else class="age-sign patch"
                    >{{ DataObj.userSignDate.split(" ")[0] }}已补卡</text
                  >
                </block>
              </view>
              <view class="err-res" v-if="!resultStr"
                >{{ "迟到" + (lateTime === null ? "" : lateTime)
                }}{{ DataObj.signType == 2 ? ",范围外打卡" : "" }}</view
              >
              <view class="lower_addre">
                <text>{{ DataObj.signAddress || "--" }}</text>
                <text>{{ DataObj.userSignDate || "--" }}</text>
              </view>
            </view>
            <!-- 这里区分 当天没打签退 不显示签退状态  -->
            <view
              class="sign-lower"
              v-if="dateStr != bjdate || DataObj.signOutAddress"
            >
              <!-- <view class="line">
                <view></view>

                <image src="/static/images/index/fold.svg" mode="" />

                <view></view>
              </view> -->
              <view class="lower_state">
                <text
                  :style="{
                    'background-color': resultOutStr ? '#69cd00;' : '#E02020;',
                  }"
                ></text>
                <text>签退</text>
                <text class="strColor" v-if="DataObj.signOutType == 2"
                  >定位异常</text
                >
                <block v-if="signOutLeaveEarly === 2">
                  <text
                    :class="{
                      strColor: !resultOutStr,
                      strColors: resultOutStr,
                    }"
                    >缺卡</text
                  >
                  <text></text>
                </block>
                <block v-else>
                  <text
                    :class="{
                      strColor: !resultOutStr,
                      strColors: resultOutStr,
                    }"
                    >{{ resultOutStr ? "正常" : "早退" }}</text
                  >
                </block>
                <!-- 当天下午的补卡当天不能申请 -->
                <block
                  v-if="
                    dateStr != bjdate &&
                    (!resultOutStr || DataObj.signOutType == 2)
                  "
                >
                  <text
                    v-if="DataObj.newSignOut == 2"
                    class="age-sign"
                    @click="applyCard('Leave')"
                    >申请补卡</text
                  >
                  <text v-else class="age-sign patch"
                    >{{
                      DataObj.userSignOutDate !== null
                        ? DataObj.userSignOutDate.split("")[0]
                        : ""
                    }}已补卡</text
                  >
                </block>
              </view>
              <view class="err-res" v-if="!resultOutStr"
                >{{ "早退" + (LeaveTime === null ? "" : LeaveTime)
                }}{{ DataObj.signOutType == 2 ? ",范围外打卡" : "" }}</view
              >
              <view class="lower_addre">
                <text>{{ DataObj.signOutAddress || "--" }}</text>
                <text>{{ DataObj.userSignOutDate || "--" }}</text>
              </view>
            </view>
          </block>
          <view
            class="sign-lower"
            v-if="card && dateInfo.date < new Date().getTime()"
          >
            <view class="line">
              <view>789</view>

              <image src="/static/images/index/fold.svg" mode="" />

              <view></view>
            </view>
            <view class="lower_state">
              <text class="redDot"></text>
              <text>签到</text>
              <text class="strColor">缺卡</text>
              <text></text>
              <text
                v-if="DataObj.newSign != 1"
                class="age-sign"
                @click="applyCard('late', 'mis')"
                >申请补卡</text
              >
              <text v-else class="age-sign patch"
                >{{ DataObj.newSignTime.split(" ")[0] }}已补卡</text
              >
            </view>
            <view
              class="lower_state"
              v-if="dateStr != bjdate || DataObj.signOutAddress"
            >
              <text class="redDot"></text>
              <text>签退</text>
              <text class="strColor">缺卡</text>
              <text></text>
              <text
                v-if="DataObj.newSignOut != 1"
                class="age-sign"
                @click="applyCard('Leave', 'mis')"
                >申请补卡</text
              >
              <text v-else class="age-sign patch"
                >{{ DataObj.newSignOutTime.split(" ")[0] }}已补卡</text
              >
            </view>
          </view>
          <!-- <view class="rest" v-if="card && (dateInfo.week == 0 || dateInfo.week == 6 || (dateInfo.holiday && dateInfo.holiday.Remark))">
					<image src="/static/images/xiu.png" mode=""></image>
					<view class="">今日休息</view>
				</view> -->
          <!-- 签到详情 end -->
        </view>
      </view>
    </view>
    <dutyList v-if="activeTab == 1" :dutyMonth="dutyMonth"></dutyList>

    <!-- 底部按钮 -->
    <view class="btnBottom">
      <view
        :class="['btnBottom_item', activeTab == 0 ? 'active' : '']"
        @click="changeAcive(0)"
        >
		<image v-if="activeTab==0" src="../static/clockA.svg" mode="" />
		<image v-else src="../static/clockD.svg" mode="" /> 
		<view>考勤打卡</view>
		</view
      >
      <view
        :class="['btnBottom_item', activeTab == 1 ? 'active' : '']"
        @click="changeAcive(1)"
        >
		<image v-if="activeTab==1" src="../static/dutyA.svg" mode="" />
		<image v-else src="../static/dutyD.svg" mode="" />  
		<view>个人值班</view>
		</view>
    </view>
    <!-- <uni-popup ref="popup" type="bottom"> -->
    <siginApplyCard
      :show="cardShow"
      @closeModel="closeModel"
      @submitCard="submitCard"
      :dataObj="cardObj"
    >
    </siginApplyCard>
    <!-- </uni-popup> -->

    <agreDialog
      v-if="showAgre"
      @closed="showAgre = false"
      @submit="siginClick(canSignType, true)"
    ></agreDialog>
  </view>
</template>

<script>
import UniCalendar from '../components/uni-calendar/uni-calendar.vue';
// import unipopup from '@/components/uni-popup/uni-popup';
import siginApplyCard from './components/siginApplyCard.vue';
import {
	getSiginInfo,
	getSiginUpdate,
	getSiginDetail,
	bjOfTime,
	siginMake,
} from '@/apis/system.js';
import { formatTime, getlocalinfo, formatSeconds } from '@/utils/utils.js';
import { getDistance } from '@/utils/tools.js';
import { mapState } from 'vuex';
import agreDialog from './components/agreDialog.vue';
import dutyList from './components/dutyList.vue';
export default {
	name: 'siginIndex',
	data() {
		return {
			showAgre: false,
			// 是否可打卡
			canSign: false,
			canSignType: '',
			isShowYear: false,
			mode: 1,
			addressNames: '',
			// 打卡时间
			times: null,
			// 签到id
			signID: null,
			// 签到前时间格式
			signTimeState: '',
			// 状态文本
			resultStr: '',
			// 状态文本
			resultOutStr: '',
			// 日期数据状态
			dateList: [],
			// 当前日期年月日 点击改变
			dateStr: '',
			// 当前日期年月日 默认当前日期
			ymd: '',
			// 缺卡状态,
			card: false,
			// 上下班时间规则
			signSettingName: '',
			// 时间清除
			Timers: null,
			dateInfo: {
				// date:new Date().getTime(),
			},
			// 打卡详情数据
			DataObj: {},
			signOutLeaveEarly: null,
			signBeLate: null,
			// 北京时间
			bjTime: null,
			// 北京时间,
			bjdate: null,
			// ////////////
			// 迟到时间
			lateTime: null,
			// 早退时间
			LeaveTime: null,
			// 补卡数据
			cardObj: {},
			currDay: null,
			currYMD: null,
			currMonth: null,
			// 初始化月份
			initMonth: null,
			currYear:null,
			setupState: 0,
			addresState: null,
			latitude: 0,
			longitude: 0,
			// upDateStr:"",//缺卡时补卡的日期
			// 当前动态时间
			timesCurr: 0,
			cardShow: false,
			// 网络状态显示
			loadingAddress: false,
			formatTime: formatTime,
			activeTab: 0,
			// 从外部链接进来激活第几个月份
			dutyMonth:'' 
		};
	},
	computed: {
		...mapState('user', ['userinfo']),
		isWorkDay() {
			const formatted = this.formatTime(this.dateInfo.date).replace(/-/g, '');
			const dayInfo = this.dateList.find((item) => {
				return `${item.signDate}` === `${formatted}`;
			});
			console.log(`dayInfo:${dayInfo}`);
			return dayInfo ? dayInfo.holiday === 0 : false;
		},
	},
	components: {
		UniCalendar,
		siginApplyCard,
		agreDialog,
		dutyList,
	},
	onLoad(opt) {
		console.log(opt,'看看传值');
		if (Object.keys(opt).length <= 0) return;
		if (opt.duty) {
			// 如果是公众号或者消息推送跳进来
			this.activeTab = 1;
			const str = `${opt.year}/${opt.month}/01`;
			this.dutyMonth = str;
			console.log(this.dutyMonth,'this.dutyMonth');
		}
		if (this.activeTab == 0) {
			this.currYear = new Date().getFullYear();
			this.handSiginInfo(opt.month);
			this.initMonth = opt.month;
		}
	},
	onShow() {
		var bjTimes = null;
		clearInterval(this.Timers);
		bjOfTime().then((res) => {
			if (res.code === 200) {
				bjTimes = res.data.time;
				this.bjdate = res.data.date;
			}
		});

		// #ifdef H5
		setTimeout(() => {
			this.getLocalFuc();
		}, 1000);
		// #endif

		// #ifndef H5
		this.getLocalFuc();
		// #endif

		this.Timers = setInterval(() => {
			bjTimes = bjTimes + 1000;
			this.timesCurr = bjTimes;
			this.times = formatTime(bjTimes, '-', true, true);
		}, 1000);
	},
	onUnload() {
		clearInterval(this.Timers);
	},
	methods: {
		changeAcive(res) {
			this.activeTab = res;
			// 如果是2
			if (res == 2) {
				console.log(2222);
			}
		},
		createdCalendar(res) {
			console.log(res,'切换日期creat');
			this.currMonth = res.month;
			this.currYear = res.year;
			this.handSiginInfo(res.month);
		},
		// 定位地址
		refresh() {},
		// 签到点击
		siginClick(states, sig) {
			// 没有位置或者当前日期不一致时
			if (!this.addressNames) return;
			if (this.dateStr != this.bjdate) {
				uni.showToast({
					title: '当前日期不可打卡',
					icon: 'none',
				});
				return;
			}

			if (!this.canSign && !sig) {
				this.canSignType = states;
				this.showAgre = true;
				return;
			}
			this.showAgre = false;
			let objData = {
				id: this.signID,
				signLongitude: this.longitude,
				signLatitude: this.latitude,
				signAddress: this.addressNames,
				signTime: this.timesCurr,
				// 当前时间大于上班时间为迟到
				signBeLate: this.timesCurr > this.DataObj.userSignTime ? 0 : 1,
			};
			// let currTime = this.timesCurr
			if (this.timesCurr > this.DataObj.userSignTime) {
				// 算出迟到时间
				let s1 = this.timesCurr / 1000;
				let s2 = this.DataObj.userSignTime / 1000;
				this.lateTime = formatSeconds(parseInt(s1 - s2));
			}
			if (states === 2) {
				objData = {
					id: this.signID,
					signOutLatitude: this.latitude,
					signOutLongitude: this.longitude,
					signOutAddress: this.addressNames,
					signOutTime: this.timesCurr,
					// 当前时间大于下班间为正常下班,
					signOutLeaveEarly:
            this.timesCurr > this.DataObj.userSignOutTime ? 1 : 0,
				};
				if (this.timesCurr < this.DataObj.userSignOutTime) {
					// 算出早退时间
					let a1 = this.timesCurr / 1000;
					let a2 = this.DataObj.userSignOutTime / 1000;
					this.LeaveTime = formatSeconds(parseInt(a2 - a1));
				}
			}
			// 定位上报埋点
			this.reportAddress({
				longitude: this.longitude,
				latitude: this.latitude,
				userId: this.userinfo.user_id,
				operation: 1,
				// 打卡定位
				recordType: 3,
			});
			getSiginUpdate(objData).then((res) => {
				if (res.code === 200) {
					uni.showToast({
						title: '打卡成功',
						icon: 'success',
					});
					this.sininDetail(this.dateStr, 1);
				}
			});
		},
		// 选择日期
		chooseDay(day, month, year, holiday) {
			this.dateStr = year + '' + month + '' + day;
			// this.upDateStr = year + '-' + month + '-' + day;
			const date = new Date(year + '/' + month + '/' + day);
			let dayS = new Date(year + '/' + month + '/' + day).getTime() / 1000;
			// 大于当前时间不请求接口
			if (dayS > new Date().getTime() / 1000) {
				this.DataObj.signAddress = '';
				this.DataObj.signOutAddress = '';
				return;
			}
			this.dateInfo = {
				date: date.getTime(),
				week: date.getDay(),
				holiday: holiday,
				dateStr: this.ateStr,
			};
			console.log('年月日', this.dateStr, date.getDay(), holiday, this.bjdate);
			this.ymd = this.dateStr;
			this.currYMD = year + '/' + month + '/' + day;
			this.currDay = day;
			// 区分当前时间 圆点置灰
			if (this.dateStr != this.bjdate) {
				this.addresState = false;
			} else {
				this.addresState = true;
			}

			this.sininDetail(this.dateStr, 2);
		},

		// 计算是否在打卡范围内
		async canSignFuc() {
			setTimeout(() => {
				// let local = await this.getLocalFuc();
				let list = this.cardObj.signRangeList || [];
				let signRange = this.cardObj.signRange || 0;
				let can = false;
				console.log('canSignFuc', list, this.latitude, this.longitude);
				for (let i = 0; i < list.length; i++) {
					if (list[i].latitude && this.latitude) {
						let dis = getDistance(
							this.latitude,
							this.longitude,
							list[i].latitude,
							list[i].longitude
						);

						if (signRange >= dis) {
							can = true;
							break;
						}
					}
				}
				this.canSign = can;
			}, 1000);
		},
		// 签到详情 state: 1 初始圆点状态 2 为不更新初始状态
		sininDetail(date) {
			if (!date) return;

			uni.showLoading({
				title: '加载中',
				mask: true,
			});
			getSiginDetail({
				date: date,
			})
				.then((res) => {
					if (res.code === 200) {
						uni.hideLoading();
						this.DataObj = res.data;
						this.signID = res.data.id;
						this.cardObj = res.data;
						this.signOutLeaveEarly = res.data.signOutLeaveEarly;
						this.signBeLate = res.data.signBeLate;
						this.canSignFuc();
						if (res.data.signAddress) {
							this.signTimeState = res.data.signAddress;
						} else {
							this.signTimeState = '';
						}
						// && date != this.ymd
						if (
							!res.data.signAddress &&
              !res.data.signOutAddress &&
              date != this.bjdate
						) {
							// 当天没打卡时 不显示当天的缺卡状态
							this.card = true;
						} else {
							this.card = false;
						}
						if (res.data.userSignDate && res.data.userSignTime) {
							let userSignDate = res.data.userSignDate;
							let userSignTime = res.data.userSignTime;
							let newTimes = new Date(
								userSignDate.replace(/[-]/g, '/')
							).getTime();
							if (newTimes > userSignTime) {
								let s1 = newTimes / 1000;
								let s2 = userSignTime / 1000;
								this.lateTime = formatSeconds(parseInt(s1 - s2));
								this.cardObj.lateTime = this.lateTime;
							}
							// console.log("迟到22",this.lateTime,res.data.userSignTime,res.data.userSignDate)
						}
						if (res.data.userSignOutTime && res.data.userSignOutDate) {
							let userSignOutDate = res.data.userSignOutDate;
							let userSignOutTime = res.data.userSignOutTime;
							let newOutTimes = new Date(
								userSignOutDate.replace(/[-]/g, '/')
							).getTime();
							if (newOutTimes < userSignOutTime) {
								let c1 = newOutTimes / 1000;
								let c2 = userSignOutTime / 1000;
								this.LeaveTime = formatSeconds(parseInt(c2 - c1));
								this.cardObj.LeaveTime = this.LeaveTime;
							}
							// console.log("早退22",this.LeaveTime)
						}
						this.resultStr = res.data.signBeLate == 0 ? false : true;
						this.resultOutStr = res.data.signOutLeaveEarly == 1 ? true : false;
					}
				})
				.catch((err) => {
					console.log('签到详情数据', err);
					this.DataObj.signAddress = '';
					this.DataObj.signOutAddress = '';

					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
						});
					}, 1000);
				});
		},
		// 获取日期数据
		handSiginInfo(month) {
			getSiginInfo({
				month: month,
				searchYear:this.currYear
			}).then((res) => {
				if (res.code == 200) {
					this.dateList = res.data.list;
					console.log(res.data, '考勤规则');
					let textUper = res.data.signSettingName
						.split('-')[0]
						.replace('上班', '');
					let textLower = res.data.signSettingName
						.split('-')[1]
						.replace(' 下班', '');
					this.signSettingName = { textUper, textLower };
					// // 获取休息日
					// this.dayOffList=res.data.list.map(item=>item.holiday===1)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
					});
				}
			});
		},
		// 将时间转为北京时区时间
		getBeiJingTime(date) {
			var d = new Date(date);
			// 目标时区时间，东八区
			var timezone = 8;
			// 本地时间和格林威治的时间差，单位为分钟
			var offsetGMT = d.getTimezoneOffset();
			// 本地时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数
			var nowDate = d.getTime();
			var targetDate = new Date(
				nowDate + offsetGMT * 60 * 1000 + timezone * 60 * 60 * 1000
			);
			console.log('东8区现在是：' + targetDate);
			return targetDate;
		},
		// 切换月份用于限制补卡申请
		changeDate(val) {
			console.log(val,'切换日期');
			this.setupState = val;
		},
		// 补卡详情信息
		applyCard(type, state) {
			// this.$refs.popup.open();
			// let lock = true
			// if(this.setupState === 0){
			// 	if(this.currDay > 21 ){
			// 		uni.showToast({
			// 			title: '当前日期无法补卡',
			// 			icon: 'none'
			// 		});
			// 		lock = true
			// 	}else{
			// 		lock = false
			// 	}
			// }else if(this.setupState === 1){
			// 	lock = false
			// }
			// if(lock)return
			if (!this.DataObj.id) {
				uni.showToast({
					title: '当前日期数据错误!',
					icon: 'none',
				});
				return;
			}
			this.cardShow = true;
			this.cardObj.currYMD = this.currYMD;
			let newUserSignDate = this.cardObj.userSignDate || '';
			let newUserSignOutDate = this.cardObj.userSignOutDate || '';
			if (type === 'late') {
				this.cardObj.typeCard = 1;
				this.cardObj.userSignOutTime = null;
				this.cardObj.userSignDate = newUserSignDate.replace(/[-]/g, '/');
			} else {
				this.cardObj.typeCard = 2;
				this.cardObj.userSignTime = null;
				this.cardObj.userSignOutDate = newUserSignOutDate.replace(/[-]/g, '/');
			}
			if (state === 'mis') {
				this.cardObj.noCard = 'mis';
			}
		},
		// 弹开弹框
		closeModel(state) {
			this.cardShow = state;
		},
		// 提交补卡申请
		submitCard(data) {
			siginMake({
				id: this.DataObj.id,
				signDesc: data,
				signTime: this.cardObj.userSignTime,
				signOutTime: this.cardObj.userSignOutTime,
			}).then((res) => {
				if (res.code === 200) {
					uni.showToast({
						title: '补卡成功',
						icon: 'success',
					});
					this.handSiginInfo(this.currMonth);
					this.sininDetail(this.dateStr, 2);
					// this.$refs.popup.close();
					this.cardShow = false;
				}
			});
		},
		// 获取定位信息
		getLocalFuc() {
			return new Promise(async (reosve) => {
				let infoNameObj = {};
				this.loadingAddress = true;
				uni.getLocation({
					type: 'gcj02',
					success: async (res) => {
						console.log('getApp2', res);
						console.log('成功', res);
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						getApp().globalData.localinfo = {
							...res,
							time: new Date().getTime(),
						};

						// #ifdef H5
						infoNameObj = {
							result: {
								address: res.address,
							},
						};
						// #endif

						// #ifndef H5
						infoNameObj = await getlocalinfo(res.latitude, res.longitude);
						// #endif

						if (Object.keys(infoNameObj.result || {}).length > 0) {
							this.loadingAddress = false;
							this.addressNames = infoNameObj.result.address;
							this.addresState = infoNameObj.result.address;
						}

						reosve(true);
					},
					fail: (err) => {
						this.loadingAddress = false;
						// #ifdef H5
						uni.showModal({ title: '提示', content: '检测到尚未开启位置，请手动开启定位设置' });
						// #endif

						// #ifndef H5
						uni.showModal({
							title: '提示',
							content: '检测到尚未开启位置，请手动开启定位设置',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (res) => {
											// console.log("第一次位置",res)
											if (res.authSetting['scope.userLocation']) {
												uni.getLocation({
													type: 'gcj02',
													success: async (data) => {
														infoNameObj = await getlocalinfo(
															data.latitude,
															data.longitude
														);
														if (
															Object.keys(infoNameObj.result || {}).length > 0
														) {
															this.addressNames = infoNameObj.result.address;
														}
													},
												});
											}
										},
									});
								} else {
									uni.navigateBack({
										delta: 1,
									});
								}
							},
						});
						// #endif
						reosve(false);
						console.log('错误', err);
					},
				});
			});
		},
	},
};
</script>

<style lang="scss" scoped>
// page{
// 	background-color: #F3F6F8;
// }
.sign-wrap {
  background-color: #ffffff;

  // position: relative;
  .itemtop {
    background-color: #ffffff;

    .topOne {
      width: 680rpx;
      margin: 0 auto;
    }
  }

  .itembotm {
    background-color: #ffffff;
    margin-top: 20rpx;
    margin-bottom: 50rpx;
    padding-bottom: 100rpx;
    .botmOne {
      width: 680rpx;
      margin: 0 auto;
      padding-top: 20rpx;
    }
  }
  .btnBottom {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10;
    background: #fff;
    .btnBottom_item {
		image{
			width:48rpx;
			height: 48rpx;
		}
      display: flex;flex-direction: column;
      flex: 1;
      justify-content: center;align-items: center;
      height: 98rpx;
      border-top: 2px solid #eeeeee;
      color: #666;
      font-size: 20rpx;
    }
    .active {
      color: #0091ff;
    }
  }
}

.upper_top {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  border-bottom: 2rpx #eeeeee solid;

  text:nth-child(1) {
    font-size: 20rpx;
    font-weight: 400;
    color: #666666;
    background: #e9e9e9;
    border-radius: 4rpx;
    padding: 5rpx 10rpx 5rpx 10rpx;
    margin-right: 10rpx;
  }

  text:nth-child(2) {
    font-size: 20rpx;
    font-weight: 400;
    color: #666666;
    background: #e9e9e9;
    border-radius: 4rpx;
    padding: 5rpx 10rpx 5rpx 10rpx;
    margin-left: 10rpx;
  }
}

.sign-upper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 70rpx;

  .radioColor {
    width: 274rpx;
    height: 274rpx;
    background: linear-gradient(142deg, #9d9d9d 15%, #9d9d9d 85%);
    border-radius: 50%;
    box-shadow: 0rpx 8rpx 20rpx 0rpx #9d9d9d;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .cardOne {
      font-size: 40rpx;
      font-weight: 600;
      text-align: center;
      color: #ffffff;
    }

    .cardTwo {
      font-size: 30rpx;
      font-weight: 500;
      text-align: center;
      color: #ffffff;
      margin-bottom: 30rpx;
    }

    .cardTree {
      font-size: 24rpx;
      font-weight: 500;
      text-align: center;
      color: #ffffff;
    }
  }

  .upper_cent {
    width: 274rpx;
    height: 274rpx;
    background: linear-gradient(142deg, #00b0ff 15%, #0091ff 85%);
    border-radius: 50%;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 145, 255, 0.43);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .cardOne {
      font-size: 40rpx;
      font-weight: 600;
      text-align: center;
      color: #ffffff;
    }

    .cardTwo {
      font-size: 30rpx;
      font-weight: 500;
      text-align: center;
      color: #ffffff;
      margin-bottom: 30rpx;
    }

    .cardTree {
      font-size: 24rpx;
      font-weight: 500;
      text-align: center;
      color: #ffffff;
    }
  }

  .upper_addr {
    margin: 20rpx 0 0 0;

    text:nth-child(2) {
      font-size: 28rpx;
      font-weight: 400;
      text-align: center;
      color: #888888;
      margin: 0 10rpx 0 10rpx;
      vertical-align: middle;
    }

    image {
      width: 32rpx;
      height: 32rpx;
      vertical-align: middle;
    }
  }

  .abnormal {
    margin: 0rpx 0 40rpx 0;
    font-size: 28rpx;
  }
}
.err-res {
  color: #e02020;
  font-size: 24rpx;
  padding: 0 20rpx;
}

.sign-lower {
  padding-bottom: 50rpx;
  .line {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    margin-top: 38rpx;
    height: 16rpx;
    image {
      padding: 0 24prx;
      width: 36rpx;
      height: 16rpx;
      display: flex;
      flex: 1;
    }
    view {
      display: flex;
      width: 312rpx;
      height: 1rpx;
      background: #eee;
    }
  }

  .lower_state {
    position: relative;
    margin-bottom: 30rpx;
    .redDot {
      background-color: #e02020 !important;
    }

    text:nth-child(1) {
      width: 12rpx;
      height: 12rpx;
      background-color: #69cd00;
      border-radius: 50%;
      display: inline-block;
      margin-bottom: 7rpx;
    }

    text:nth-child(2) {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      margin: 0 20rpx 0 20rpx;
      display: inline-block;
    }

    .age-sign {
      font-size: 28rpx;
      color: #0091ff;
      text-align: right;
      position: absolute;
      right: 0rpx;
    }
    .patch {
      color: #999;
    }

    .strColor {
      border: 3rpx solid #e02020;
      border-radius: 4rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #e02020;
      text-align: center;
      padding: 0rpx 15rpx 0rpx 15rpx;
      margin-left: 10rpx;
    }

    .strColors {
      border: 3rpx solid #69cd00;
      border-radius: 4rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #69cd00;
      text-align: center;
      padding: 0rpx 10rpx 0rpx 10rpx;
      margin-left: 10rpx;
    }
  }

  .lower_addre {
    margin-top: 10rpx;

    text:nth-child(1) {
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
      margin-left: 20rpx;
    }

    text:nth-child(2) {
      display: block;
      margin-left: 20rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
    }
  }
}

.rest {
  width: 100%;
  padding: 40rpx 0;

  image {
    width: 80rpx;
    height: 80rpx;
    margin: 10rpx auto;
    display: block;
  }

  view {
    width: 100%;
    font-size: 32rpx;
    text-align: center;
    color: #999999;
  }
}
</style>
